<template>
	<!-- 搜索框容器，背景颜色根据传入的 bgColor 动态改变 -->
	<view class="search-box" :style="{'background-color': bgColor}">
		<!-- 搜索框组件 -->
		<uni-search-bar 
			:radius="100"              
			@input="input"            
			cancelButton="always"       
			bgColor="#f7f7f7"          
			placeholder="请输入商品名称"  
			@focus="showHistory"      
		></uni-search-bar>
	</view>

	<!-- 搜索建议列表容器，当有搜索结果时显示 -->
	<view class="sgg-list-container" v-if="searchResults.length > 0">
		<!-- 循环显示每一个搜索结果 -->
		<view class="sgg-item" v-for="(product, i) in searchResults" :key="i" @click="selectItem(product)">
			<!-- 商品名称 -->
			<view class="sgg-name">{{ product.goods_name }}</view>
			<!-- 向右的图标，提示可以点击 -->
			<uni-icons type="right" color="#888"></uni-icons>
		</view>
	</view>

	<!-- 加载中动画，当正在获取搜索结果时显示 -->
	<view v-if="loading" class="loading">加载中...</view>

	<!-- 空结果提示，当没有搜索结果且用户输入不为空时显示 -->
	<view v-else-if="!loading && inputString && searchResults.length === 0" class="no-results">
		<text>未找到相关商品</text>
	</view>

	<!-- 历史记录或热门搜索的显示，当输入框聚焦时显示 -->
	<view v-if="showHistoryList" class="history-list">
		<!-- 循环显示历史记录项 -->
		<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="input(item)">
			{{ item }}
		</view>
	</view>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				inputString: '', // 用户输入的搜索关键字
				timer: null,     // 用于实现防抖的定时器
				searchResults: [], // 存储搜索结果列表
				loading: false,    // 加载状态的标志
				bgColor: "#fff",    // 搜索框背景颜色
				showHistoryList: false, // 是否显示历史搜索记录
				historyList: ['推荐商品1', '推荐商品2'], // 模拟的历史搜索记录列表
			};
		},
		methods: {
			// 处理搜索框输入事件
			input(e) {
				this.inputString = e; // 更新输入内容
				clearTimeout(this.timer); // 清除上一个定时器，防止过多请求
				// 启动新的防抖定时器，在500ms后执行搜索
				this.timer = setTimeout(() => {
					this.getSearchList();
				}, 500);
			},

			// 获取搜索结果列表（模拟 API 请求）
			getSearchList() {
				// 如果输入为空，则清空搜索结果
				if (!this.inputString.trim()) {
					this.searchResults = [];
					return;
				}

				this.loading = true; // 开始请求时，显示加载中状态
				// 模拟API请求，延迟1秒返回结果
				setTimeout(() => {
					const data = {
						message: [
							{
								goods_id: 57332,
								goods_name: "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）",
							},
							{
								goods_id: 57194,
								goods_name: "亿力洗车工具汽车美容用品海绵刷不伤车漆擦车海棉清洁海绵",
							},
						],
						meta: {
							msg: "获取成功",
							status: 200,
						},
					};
					this.searchResults = data.message; // 将结果存储到 searchResults
					this.loading = false; // 请求结束，隐藏加载中状态
				}, 1000);
			},

			// 用户选择某个商品后的操作处理
			selectItem(product) {
				// 模拟跳转至商品详情页（实际应该使用路由跳转）
				console.log("选择商品：", product.goods_name);
			},

			// 显示历史搜索记录
			showHistory() {
				this.showHistoryList = false; // 将历史记录的显示标志置为 true
			},
		},
	};
</script>

<style lang="scss">
	/* 搜索框的样式 */
	.search-box {
		position: sticky; // 保持搜索框在页面顶部
		top: 0;           // 定位在页面顶部
		z-index: 999;     // 设置较高的层级，以防被其他元素遮挡
		background: #fff; // 设置背景为渐变色linear-gradient(135deg, #ffffff, #aaffff)
		padding: 0;   // 内边距10rpx
		// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
	}

	/* 搜索结果列表的容器 */
	.sgg-list-container {
		margin-top: 10rpx;
		background-color: #fff; // 背景为白色
		border-radius: 10px;     // 设置圆角
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果

		/* 搜索结果每一项的样式 */
		.sgg-item {
			display: flex;          // 使用 flex 布局
			align-items: center;    // 垂直居中
			border-top: 1px solid #efefef; // 设置上边框
			justify-content: space-between; // 两端对齐
			padding: 20rpx 10rpx;   // 内边距
			transition: all 0.3s ease; // 设置平滑过渡效果

			&:hover {
				background-color: #f9f9f9; // 悬停时背景变为浅灰色
				transform: scale(1.02);    // 悬停时略微放大
			}

			/* 商品名称的样式 */
			.sgg-name {
				white-space: nowrap;    // 禁止换行
				overflow: hidden;       // 溢出隐藏
				text-overflow: ellipsis; // 溢出时显示省略号
				font-size: 28rpx;       // 设置字体大小
				color: #333;            // 字体颜色
				margin-right: 5rpx;     // 右外边距
			}
		}
	}

	/* 加载中提示的样式 */
	.loading {
		text-align: center; // 居中对齐
		font-size: 26rpx;   // 设置字体大小
		color: #888;        // 字体颜色为灰色
		padding: 20rpx;     // 内边距
	}

	/* 没有结果时的提示样式 */
	.no-results {
		padding: 20rpx;        // 内边距
		text-align: center;    // 文本居中
		font-size: 26rpx;      // 设置字体大小
		color: #888;           // 字体颜色为灰色
		background-color: #f9f9f9; // 背景颜色为浅灰色
		border-radius: 10px;   // 设置圆角
	}

	/* 历史搜索记录列表的样式 */
	.history-list {
		padding: 20rpx;          // 内边距
		background-color: #f1f1f1; // 背景为浅灰色
		border-radius: 10px;     // 设置圆角
		margin-top: 10rpx;       // 上外边距

		/* 历史记录每一项的样式 */
		.history-item {
			padding: 10rpx 0;     // 内边距
			font-size: 26rpx;     // 字体大小
			color: #333;          // 字体颜色
			border-bottom: 1px solid #efefef; // 设置下边框
			cursor: pointer;      // 鼠标悬停时显示手型指针
		}
	}
</style>
